<template>
	<view class="edit-content">

		<view class="drag">
			<view class="canvas-body" :style="bodyStyle">
				<image :src="url" class="avatar" />
				<canvas-drag ref="canvasRef" :graph="graph" :width="canvasSize" :height="canvasSize" enableUndo="true"
					class="canvasRef" :style="'width: ' + (canvasSize-4) + 'px; height: ' + canvasSize + 'px;'" />
			</view>
		</view>

		<view class="menu-link response">
			<image src="../../static/assets/images/ic_maozi.png" class="select-icon radius margin-tb"></image>
			<button class="cu-btn bg-green finish-btn " @click="onGoToSave">完成</button>
		</view>

		<scroll-view scroll-y="true" show-scrollbar="false" :style="'height: ' + height + 'px;'">
			<view class="cu-list grid col-4">
				<view class="cu-item" v-for="item in maoziList" :key="item.url" style="background-color: #232323;">
					<view class="flex-row flex-center">
						<image :src="item.url" class="icon-img" @click="selectItem(item)"></image>
					</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import canvasDrag from "@/components/CanvasDrag/index";
	export default {
		data() {
			return {
				canvasId: "editCanvas",
				url: "",
				canvasSize: '',
				height: '',
				bodyStyle: '',
				maoziList: [{
						url: require('../../static/assets/images/ic_christmas1.png'),
						icon: "/static/assets/images/ic_christmas1.png"
					},
					{
						url: require('../../static/assets/images/ic_christmas2.png'),
						icon: "/static/assets/images/ic_christmas2.png"
					},
					{
						url: require('../../static/assets/images/ic_christmas3.png'),
						icon: "/static/assets/images/ic_christmas3.png"
					},
					{
						url: require('../../static/assets/images/ic_christmas4.png'),
						icon: "/static/assets/images/ic_christmas4.png"
					},
					{
						url: require('../../static/assets/images/ic_christmas5.png'),
						icon: "/static/assets/images/ic_christmas5.png"
					},
					{
						url: require('../../static/assets/images/ic_christmas6.png'),
						icon: "/static/assets/images/ic_christmas6.png"
					},
					{
						url: require('../../static/assets/images/ic_christmas7.png'),
						icon: "/static/assets/images/ic_christmas7.png"
					},
					{
						url: require('../../static/assets/images/ic_christmas8.png'),
						icon: "/static/assets/images/ic_christmas8.png"
					},
					{
						url: require('../../static/assets/images/ic_christmas9.png'),
						icon: "/static/assets/images/ic_christmas9.png"
					},
					{
						url: require('../../static/assets/images/ic_christmas10.png'),
						icon: "/static/assets/images/ic_christmas10.png"
					},
					{
						url: require('../../static/assets/images/ic_christmas11.png'),
						icon: "/static/assets/images/ic_christmas11.png"
					},
					{
						url: require('../../static/assets/images/ic_christmas12.png'),
						icon: "/static/assets/images/ic_christmas12.png"
					},
				]
			}
		},
		onLoad: function(option) {
			this.getSysInfo()
			this.url = JSON.parse(decodeURIComponent(option.url))
		},
		methods: {
			getSysInfo() {
				try {
					const res = uni.getSystemInfoSync();
					this.canvasSize = res.windowWidth - 40;
					this.height = res.windowHeight - this.canvasSize - 116;
				} catch (e) {
					this.canvasSize = 300;
				} finally {
					this.bodyStyle = `width:${this.canvasSize}px;height:${this.canvasSize}px`
				}
			},
			selectItem(item) {
				console.log(item.icon)
				this.setData({
					graph: {
						w: 120,
						h: 120,
						type: 'image',
						url: item.icon
					}
				});
			},
			onGoToSave() {
				uni.showLoading({
					title: "生成中..."
				})
				Promise.all([
					new Promise((resolve, reject) => {
						console.log("进入", this.url)
						if (this.url.indexOf("http") != -1) {
							// if(this.url.indexOf("thirdwx.qlogo.cn") != -1) this.url = this.url.replace('http://thirdwx.qlogo.cn', 'https://wx.qlogo.cn')
							uni.downloadFile({
								url: this.url,
								success: (res) => {
									if (res.statusCode === 200) {
										resolve(res.tempFilePath)
									} else {
										reject('头像失败')
									}
								},
								fail: (err) => {
									reject(err)
								}
							})
						} else resolve(this.url)
					}),
					new Promise((resolve, reject) => {
						this.$refs.canvasRef.exportFun().then(res => {
							resolve(res)
						}).catch(err => {
							err.prompt = '前景图失败'
							reject(err)
						});
					})
				]).then(res => {
					uni.hideLoading()
					uni.navigateTo({
						url: `/pages/save/save?url=${encodeURIComponent(JSON.stringify(res))}`
					});

					// const cId = "myCanvas"
					// const ctx = uni.createCanvasContext(cId)
					// ctx.fillStyle = "#FFFFFF";
					// ctx.fillRect(0, 0, 300, 300);
					// //绘制背景图
					// ctx.drawImage(res[0], 0, 0, 300, 300);
					// ctx.save();

					// //绘制前景图
					// ctx.drawImage(res[1], 0, 0, 300, 300);
					// ctx.restore();
					// ctx.draw()

					// setTimeout(() => {
					// 	this.heIMg(cId)
					// }, 150)
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
		},
		components: {
			canvasDrag
		}
	};
</script>


<style lang="scss" scoped>
	.edit-content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		background-color: $uni-bg-color;
	}

	.drag {
		width: 100%;
		display: flex;
		flex-direction: row;
		text-align: center;
		justify-content: center;
		align-items: center;
		margin-top: 32rpx;
	}

	.canvas-body {
		border: 2px solid #FFFFFF;
		border-radius: 4px;
		display: flex;
	}

	.avatar {
		width: 100%;
		height: 100%;
		background-color: $uni-bg-color-grey;
	}

	.canvasRef {
		width: 100%;
		height: 100%;
		position: absolute;
		display: flex;
	}

	.menu-link {
		width: 100%;
		height: 128rpx;
		margin-top: 64rpx;
		background-color: #444444;
		display: flex;
		align-items: center;
	}

	.select-icon {
		width: 72rpx;
		height: 72rpx;
		margin-left: 24rpx;
		background-color: #232323;
	}

	.icon-img {
		width: 100rpx;
		height: 100rpx;
		margin: 24rpx;
	}

	.finish-btn {
		position: absolute;
		right: 40rpx;
	}
</style>
